<template>
    <el-dialog
        title="意见反馈"
        custom-class="suggest-dialog-wrap"
        width="640px"
        center
        :visible.sync="show"
        :close-on-click-modal="false"
        :append-to-body="true"
        @close="fnClearForm()"
    >
        <el-form
            :model="form"
            :rules="rules"
            label-width="0"
            ref="suggestForm"
            class="suggest-form"
            @submit.native.prevent="fnStop"
        >
            <el-form-item prop="suggest">
                <el-input
                    autofocus
                    class="suggest-textarea"
                    type="textarea"
                    resize="none"
                    v-model.trim="form.suggest"
                    autocomplete="off"
                    placeholder="请填写您的宝贵意见"
                    show-word-limit
                    maxlength="500"
                />
            </el-form-item>
            <el-form-item
                prop="phone"
            >
                <el-input
                    class="suggest-phone"
                    type="text"
                    v-model.trim="form.phone"
                    autocomplete="off"
                    size="medium"
                    placeholder="请输入您的手机号"
                />
            </el-form-item>
        </el-form>
        <div
            slot="footer"
            class="dialog-footer"
        >
            <el-button
                class="footer-button"
                size="medium"
                @click="fnClose()"
            >
                取消
            </el-button>
            <el-button
                type="primary"
                class="footer-button"
                size="medium"
                @click="fnSubmit"
                :disabled="formDisabled"
            >
                提交反馈
            </el-button>
        </div>
    </el-dialog>
</template>

<script>
export default {
    components: {},
    data() {
        return {
            show: false,
            submitting: false,
            form: {
                suggest: '',
                phone: '',
            },
            rules: {
                suggest: [
                    {required: true, message: '请输入您的意见', trigger:'blur'}
                ],
                phone: [
                    {required: true, message: '请输入您的手机号', trigger:'blur'},
                    { validator: this.validatePhone, trigger: 'blur' }
                ]
            },
        };
    },
    computed: {
        formDisabled(){
            // console.log(!(this.form.suggest && this.form.phone));
            return !(this.form.suggest && this.form.phone);
        }
    },
    methods: {
        validatePhone(rule, value, callback){
            if ((/^1\d{10}$/.test(value))) {
                callback();
            } else {
                callback(new Error('请输入正确的手机号'));
            }
        },
        fnStop(){},
        fnShow(){
            this.show = true;
        },
        fnClearForm(){
            console.log('clearForm');
            this.form = {
                suggest: '',
                phone: '',
            };
        },
        fnClose(){
            this.show = false;
            this.fnClearForm();
        },
        fnSubmit(){
            if(this.submitting){
                return ;
            }
            this.$refs.suggestForm.validate(valid => {
                if(valid){
                    this.submitting = true;
                    this.$post('/__student/Feedback/submit', {
                        feed_content: this.form.suggest,
                        feed_contact: this.form.phone
                    }).then(resp => {
                        if (resp.code == 1) {
                            this.$notify.success({
                                title: '',
                                duration: 2000,
                                message: '提交成功'
                            });
                            this.show = false;
                        }else{
                            this.$notify.error({
                                title: '错误',
                                duration: 2000,
                                message: resp.msg
                            });
                        }
                        this.submitting = false;
                    }).catch(() => {
                        this.submitting = false;
                    });
                }else{
                    this.submitting = false;
                }
            });
        },
    }
};

</script>
<style lang="less">
.suggest-dialog-wrap{
    .el-dialog__header{
        padding: 0 32px!important;
        height: 44px;
        line-height: 44px;
        background: #FAFAFA;
        box-shadow: 0px 1px 0px 0px #E9E9E9;
        border-radius: 4px 4px 0px 0px;
        font-size: 14px;
        font-weight: 500;
        color: #333333;
        text-align: left;
    }
    .el-dialog__title{
        font-size: 14px;
        font-weight: 600;
        color: #333333;
        line-height: 14px;

    }
    .el-dialog__body{
        padding: 36px 60px 0;
    }
    .el-dialog__headerbtn{
        top: 15px;
    }
    .el-dialog__footer{
        display: flex;
        justify-content: center;
        align-items: center;
        padding-top: 0;
    }
    .el-textarea__inner{
        height: calc(100% - 45px);
        border: 0;
    }
    .el-form-item{
        margin-bottom:24px;
    }
}
</style>
<style lang="less" scoped>
.suggest-form{
    width: 520px;
}
.footer-button{
    width:120px;
}
.suggest-textarea{
    width: 520px;
    height: 180px;
    border: 1px solid #DCDFE6;
    border-radius: 4px;
}
</style>